<template>
  <div class="navbar-com">
    <div class="container">
      <div class="left  d-flex align-items-center">
        <span class="d-md-none d-lg-none">
          <img class="logo-2" :src="getImgUrlMax(options.company.logo1)"/>
        </span>
      </div>
      <div @click.stop="toggle" class="button d-md-none d-lg-none icon iconfont icon-zhankai"></div>
      <div :class="{'show-nav':showNav}" class="nav-wrap d-none d-sm-none d-md-block d-lg-block">
        <ul class="nav">
          <li
            class="nav-item"
            :class="{'active':path.indexOf(item.router) !== -1}"
            @click="change(index,item)"
            :key="index"
            v-for="(item,index) in navList"
          >
            {{item.name}}
            <div class="subnav-wrap" :class="{'nobg':isNullOrEmpty(item.subNav)}">
              <p  @click.stop="selectSubNav(sub, item)" :key="subIndex" v-for="(sub,subIndex) in item.subNav">
                {{sub.name}}<span> > </span></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['options','path'],
    watch: {
      options: function (val) {
        let departments = val.departments
        if (!this.isNullOrEmpty(departments)) {
          for (let nav of this.navList) {
            if (nav.name === '科室介绍') {
              nav.router = `/zhuanke`
              nav.subNav = []
              for (let d of departments) {
                nav.subNav.push(
                  {
                    name: d.departmentName,
                    router: `/zhuanke/${d.id}`,
                    id: nav.id
                  }
                  )
              }
              break;
            }
          }
        }

        let about = val.about
        if (!this.isNullOrEmpty(about)) {
          for (let nav of this.navList) {
            if (nav.name === '关于我们') {
              nav.router = `/about/allad`
              nav.subNav = []
              for (let d of about) {
                nav.subNav.push(
                  {
                    name: d.typeName,
                    router: `/about/allad/${d.typeCode}`,
                    id: nav.id
                  }
                )
              }
              break;
            }
          }
        }

        let news  = val.news
        if (!this.isNullOrEmpty(news)) {
          for (let nav of this.navList) {
            if (nav.name === '新闻动态') {
              nav.router = `/news`
              nav.subNav = []
              for (let d of news) {
                nav.subNav.push(
                  {
                    name: d.typeName,
                    router: `/news/${d.typeCode}`,
                    id: nav.id
                  }
                )
              }
              break;
            }
          }
        }
      }
    },
    computed: {},
    created() {

    },
    data() {
      return {
        navList: [
          {
            id: 1,
            name: '首页',
            router: '/home/index',
            subNav: [],
            checked: false
          },
          {
            id: 2,
            name: '关于我们',
            router: '/about/allad',
            subNav: [],
            checked: false
          },
          {
            id: 3,
            name: '新闻动态',
            routerName: 'news',
            router: '/news',
            subNav: [],
            checked: false
          },
          {
            id: 4,
            name: '科室介绍',
            routerName: 'zhuanke',
            router: 'zhuanke',
            checked: false,
            subNav: [
              {
                name: '关于奥理徳 ',
                router: 'home',
                id: '1'
              },
              {
                name: '奥理徳文化 ',
                router: 'home',
                id: '1'
              },
              {
                name: '院长介绍 ',
                router: 'home',
                id: '1'
              },
              {
                name: '发展历程 ',
                router: 'home',
                id: '1'
              },
              {
                name: '荣誉资质 ',
                router: 'home',
                id: '1'
              }
            ],
          },
          {
            id: 5,
            name: '专家团队',
            router: 'team',
            subNav: [],
            checked: false
          },
          {
            id: 6,
            name: '预约挂号',
            router: 'order',
            subNav: [],
            checked: false
          },
          {
            id: 7,
            name: '来院路线',
            router: '/about/a/map',
            subNav: [],
            checked: false
          },
          /*{
            id: 8,
            name: '联系我们',
            router: 'contactUs',
            subNav: [],
            checked: false
          }*/
        ],
        currentIndex: 0,
        showNav: false,
        currentPage: 'home/index'
      }
    },
    components: {},
    mounted() {
      this.hideSubNav()
    },
    methods: {
      goZhongsheng() {
        location.href='http://www.zspcl.com/'
      },
      change(index, item) {
        let {isNullOrEmpty} = this;

        //导航定位问题
        let lists = document.querySelectorAll('.nav>li');

        if(!isNullOrEmpty(lists)){
          lists = Object.keys(lists).map(key=> lists[key]);
       }

        try {
          this.currentIndex = index;
          this.currentPage = this.$route.fullPath
        } catch (e) {}
        let params = {
          id: item.id
        };

        if (item.router === 'order') {
          this.$emit('show-code');
          return;
        }

        if (item.router === 'contactUs') {
          if (!this.isNullOrEmpty(this.options.company) && !this.isNullOrEmpty(this.options.company.qq)) {
            window.open(this.options.company.qq);
          }
          return;
        }

        this.navList.map((itItem, itIndex) => {
          if (itItem.id === item.id) {
            if (itItem.checked) {
              itItem.checked = false

            } else {
              itItem.checked = true
            }

          } else {
            itItem.checked = false
          }
        });

        if (this.isNullOrEmpty(item.subNav)) {
          if (this.showNav) {
            this.showNav = false
          }
        } else {
          if (item.subNav[0].router.indexOf('/') == 0) {
            this.$router.push({path: item.subNav[0].router})
          } else {
            this.$router.push({name: item.subNav[0].router, params: params})
          }
          return;
        }

        //路由跳转
        if (item.router.indexOf('/') == 0) {
          this.$router.push({path: item.router})
        } else {
          this.$router.push({name: item.router, params: params})
        }
      },
      selectSubNav(subItem, item) {
        item.checked = false
        this.currentPage = this.$route.fullPath
        this.showNav = false
        if (subItem.router.indexOf('/') === 0) {
          this.$router.push({path: subItem.router})
        } else {
          this.$router.push({name: subItem.router})
        }
      },
      hideSubNav() {
        let _this = this
        document.addEventListener('click', function () {
          _this.showNav = false;
          _this.stopScroll(_this.showNav)
          _this.navList.map((itItem, itIndex) => {
            itItem.checked = false
          });
        });
      },
      toggle() {
        this.showNav = !this.showNav
        this.stopScroll(this.showNav)
      }
    }
  }
</script>

<style lang="less">
  @import "~assets/style/public";

  .navbar-com {
    background-color: @icon-color;
    .container {
      height: 100%;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      .left {
        .logo-2 {
          max-width: 394/@size;
          //max-height: 58/@size;
          width: 100%;
        }
      }
      .nav-wrap {
        width: 100%;
        transition: all 0.5s;
      }
       .button{
         color: #fff;
       }
      .nav {
        background: transparent;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        .nav-item {
          color: #fff;
          transition: all 0.5s;
          cursor: pointer;
          padding: 0 20/@size;
          height: 60/@size;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          position: relative;
          &:hover {
             background: rgba(4, 4, 4, 0.20);
            .subnav-wrap{
              display: block;
            }
          }
          .nobg{
            display: none !important;
          }
          .subnav-wrap {
            flex-direction: column;
            justify-content: center;
            background: #FFFFFF;
            border: 1px solid @icon-color;
            min-width: 120/@size;
            white-space:nowrap;
            position: absolute;
            top: 60/@size;
            left: 0%;
            z-index: 100;
            display: none;
            color: @theme-color;
            animation: show 0.5s;
            padding: 0 10/@size;
            p{
              display: flex;
              justify-content: space-between;
              padding:2/@size 0;
            }
          }
        }

        .active {
          background: rgba(4, 4, 4, 0.20) !important;
        }

      }
      .button {
        width: 70/@size;
        height: 60/@size;
        line-height: 60/@size;
        display: flex;
        color: #fff;
        cursor: pointer;
        text-align: center;
        justify-content: center;
        font-size: 40/@size;
      }
    }
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .navbar-com {
      height: 80/@size;
      position: fixed;
      width: 100%;
      z-index: 102;
      top: 0;
      left: 0;
      .container {
        .nav-wrap {
          position: fixed;
          top: 80/@size;
          right: 0;
          z-index: 1000;
          background: #333333;
          box-shadow: 0 2/@size 6/@size 0 rgba(0,0,0,0.50);
          height: 100%;
          width: 375/@size;
          padding: 0 37/@size;
        }
        .show-nav {
          display: block !important;
          animation: navIn 0.5s;
          p {
            display: flex;
            font-family: MicrosoftYaHeiUI;
            font-size: 15/@size;
            color: @icon-color;
            letter-spacing: 0.5px;
            text-align: justify;
            justify-content: space-between;
            flex-wrap: nowrap;
            padding: 5/@size 10/@size;
            margin-bottom: 0;
          }
        }
        .nav {
          .nav-item {
            &:hover {
              background: transparent;
              .subnav-wrap{
                display: none;
              }
            }
            .nobg{
              display: none !important;
            }
            .subnav-wrap {
              display: none;
            }
          }

          .active {
            background: rgba(4, 4, 4, 0.20) !important;
          }

        }


        @keyframes navIn {
          0% {
            transform: translateX(50%);
            opacity: 0;
          }

          100% {
            opacity: 1;
            transform: translateX(0%);
            //transform: translateX(-50%) translateY(0);
          }
        }

        .nav {
          display: block;
          justify-content: space-between;
          width: 100%;
          height: 100%;
          .nav-item{
            width: 100%;
            height: 70/@size;
            display: flex;
            justify-content: center;
            border: 1px solid #FFFFFF;
            margin-top: 40/@size;
          }
          .active {
            background: @theme-color !important;
            border: 1px solid @theme-color;
          }

        }
        .button {

        }
      }
    }
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .navbar-com {
      .container {
        .nav {
          background: transparent;
          display: flex;
          justify-content: space-between;
          width: 100%;
          height: 100%;
          .nav-item {
            padding: 0 10/@size;
            height: 60/@size;
          }
        }
      }
    }
  }

</style>
